<script lang="ts" setup>

import {ref, watch} from "vue";
import {onLoad} from "@dcloudio/uni-app";

/*const props=defineProps<{
  imageSrc: string // 需要被编辑的图片
  index?:number // 图片索引（可选）
}>()*/

onLoad(async (option: any) => {
  imageSrc.value = option.imageSrc
  index.value = option.index
/*  uni.getImageInfo({
    src: imageSrc.value,
    success: (res) => {
      if (res.height > res.width) {
        widthLonger.value = false;
        activeIndex.value = 0;
      } else {
        widthLonger.value = true;
        activeIndex.value = 2;
      }
    }
  })*/
})
const widthLonger=ref(false)
const imageSrc = ref()
const index = ref()
// 确认上传
const handleCrop = (res: { tempFilePath: string }) => {
  if (index.value) {
    const newImage = {
      path: res.tempFilePath,
      index: index.value
    }
    uni.$emit('cutUploadImage', newImage)
  }
  uni.navigateBack({
    delta: 1
  })
}
const cutHeight = ref(600)
const cutWidth = ref(600)
const onChange = (index: number) => {
  activeIndex.value = index
}
const cutList = [{
  height: 600,
  width: 600,
  name: '1:1'
}, {
  height: 800,
  width: 600,
  name: '3:4'
}, {
  height: 600,
  width: 800,
  name: '4:3'
}, {
  height: 450,
  width: 800,
  name: '16:9'
}, {
  height: 800,
  width: 450,
  name: '9:16'
}]
const activeIndex = ref(0)
watch(activeIndex, (newVal) => {
  cutHeight.value = cutList[newVal].height
  cutWidth.value = cutList[newVal].width
}, {immediate: true})
</script>

<template>
  <view>
    <qf-image-cropper
        :canChoose="false"
        :gup="true"
        :height="cutHeight"
        :src="imageSrc"
        :width="cutWidth"
        :zIndex="9"
        :areaScale="0.3"
        fileType="jpg"
        :navigation="false"
        @crop="handleCrop"
    ></qf-image-cropper>
    <view class="flex align-stretch justify-around"
          style="position: absolute;bottom: 125rpx;right:0;z-index: 99;width: 80%">
      <view v-for="(item,index) in cutList" :key="item.name" class=" text-white flex flex-column align-center justify-between"
            style="row-gap: 5px"
            @click="onChange(index)">
        <view :class="['text-bold',activeIndex===index?'active':'no-active']"
              :style="{width:item.width/40+'px',height:item.height/40+'px'}"></view>
        <view :style="{color:activeIndex===index?'#39c5bb':'#fff'}">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.active {
  border: #39c5bb 1px solid !important;
  color: #39c5bb;
  font-weight: bold;
}

.no-active {
  border: #FFFFFF 1px solid !important;
  color: #FFFFFF;
}
</style>

